<template>
  <div class="analysis-page">
    <!-- 添加通用页头 -->
    <PageHeader title="数据分析" :showLeftButton="false" />
    <div class="content">
      <PullRefresh @refresh="onRefresh">
      
      <el-card style="margin-bottom: 2rem;">
        <template #header>
          <div class="card-header">
            <span>事件类型分布</span>
          </div>
        </template>
        <div class="chart-container">
          <div class="chart-placeholder">
            <el-empty description="饼图：各类事件占比"></el-empty>
          </div>
        </div>
      </el-card>
      
      <el-card style="margin-bottom: 2rem;">
        <template #header>
          <div class="card-header">
            <span>年度事件统计</span>
          </div>
        </template>
        <div class="chart-container">
          <div class="chart-placeholder">
            <el-empty description="柱状图：每年事件数量"></el-empty>
          </div>
        </div>
      </el-card>
      
      <el-card>
        <template #header>
          <div class="card-header">
            <span>近期活动</span>
          </div>
        </template>
        <el-timeline>
          <el-timeline-item 
            v-for="event in recentEvents" 
            :key="event.id" 
            :timestamp="event.date"
            @click="viewDetail(event.id)"
          >
            <div class="timeline-content">
              <h4>{{ event.title }}</h4>
              <p>{{ event.description }}</p>
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-card>
      </PullRefresh>
    </div>
  </div>
</template>

<script>
import PageHeader from '../components/PageHeader.vue'
import PullRefresh from '../components/PullRefresh.vue'
export default {
  name: 'AnalysisPage',
  components: {
    PageHeader,
    PullRefresh
  },
  data() {
    return {
      recentEvents: [
        {
          id: 3,
          title: '旅行结婚',
          date: '2022-05-01',
          description: '和爱人一起去了三亚旅行结婚',
          type: 'family'
        },
        {
          id: 4,
          title: '学习吉他',
          date: '2021-03-10',
          description: '开始学习吉他，培养新的兴趣爱好',
          type: 'hobby'
        },
        {
          id: 2,
          title: '第一份工作',
          date: '2020-08-15',
          description: '加入了第一家公司，开始职业生涯',
          type: 'career'
        }
      ]
    }
  },
  mounted() {
    // 这里可以加载图表库并绘制图表
    // 例如使用 ECharts、Chart.js 等
  },
  methods: {
    viewDetail(id) {
      this.$router.push(`/event-detail/${id}`)
    },
    
    // 下拉刷新回调
    async onRefresh() {
      // 模拟刷新数据
      await new Promise(resolve => setTimeout(resolve, 1000))
      this.$message.success('数据分析已刷新')
      // 实际项目中这里应该重新加载图表数据
    }
  }
}
</script>

<style scoped>
.analysis-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  width: 100%;
  padding-bottom: 60px;
}

.content {
  width: 100%;
  margin: 0;
  height: calc(100vh - 60px); /* 假设页头高度为60px */
  overflow: hidden;
}

.content h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: #333;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.timeline-content {
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.timeline-content:hover {
  background-color: #f5f5f5;
}

.timeline-content h4 {
  margin: 0 0 0.5rem 0;
  color: #333;
}

.timeline-content p {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}
</style>